@import "mixin";

@mixin confirm-btn {
  width: rem(345px);
  height: rem(49px);
  line-height: rem(49px);
  text-align: center;
  border-radius: rem(4px);
  background-color: #dc3838;
  font-size: rem(18px);
  color: #ffffff;
}

.form {
  margin: rem(20px) 0 rem(25px) 0;
  >.form-group {
    display: flex;
    margin-bottom: rem(10px);
    width: 100%;
    height: rem(43px);
    line-height: rem(43px);
    background-color: #fff;
    @include border-bottom-1px(#e5e5e5);
    @include border-top-1px(#e5e5e5);
    font-size: 0;
    >input {
      padding-left: rem(16px);
      flex: 1;
      width: 100%;
      height: 100%;
      font-size: rem(16px);
      color: #999999;
    }
    >.left {
      padding-left: rem(16px);
      flex: 1;
      float: left;
      display: inline-block;
      height: 100%;
      >span {
        font-size: rem(16px);
        color: #999999;
      }
    }
    >.right {
      padding-right: rem(16px);
      float: right;
      display: inline-block;
      height: 100%;
      >span {
        font-size: rem(16px);
        color: #999999;
      }
    }
    >.phone-text-wrapper {
      flex: 0 0 rem(120px);
      width: rem(120px);
      height: 100%;
      >button {
        position: relative;
        width: 100%;
        background-color: #fff;
        padding: rem(12px);
        font-size: rem(13px);
        color: #dc3838;
        &:before {
          position: absolute;
          top: 50%;
          left: 0;
          margin-top: rem(-10px);
          content: '';
          width: 1px;
          height: rem(20px);
          background-color: #e5e5e5;
        }
      }
    }
  }
}

.btn-wrapper {
  text-align: center;
  font-size: 0;
  >a {
    display: inline-block;
    @include confirm-btn
  }
  >p {
    margin-top: rem(20px);
    font-size: rem(13px);
    color: #333333;
  }
}

/*解绑成功样式*/
.change-phone-result-banner {
  padding-top: rem(70px);
  width: 100%;
  height: rem(225px);
  background-color: #fff;
  @include border-bottom-1px(#e5e5e5);
  >.change-phone-result {
    text-align: center;
    >.icon-register-correct {
      display: inline-block;
      width: rem(100px);
      height: rem(100px);
      @include bg-image('../images/icon-register-correct')
    }
    >.icon-register-error {
      display: inline-block;
      width: rem(100px);
      height: rem(100px);
      @include bg-image('../images/icon-register-error')
    }
    >p {
      height: rem(50px);
      line-height: rem(50px);
      font-size: rem(16px);
      color: #333333;
    }
  }
  &.change-phone-error {
    margin-bottom: rem(25px);
  }
}